/*
 * @Author: ChunLai
 * @Date: 2023-07-27 16:28:29
 * @LastEditTime: 2023-08-03 15:22:11
 * @Description:绘制canvas公共方法
 * @FilePath: \0.newInsure\src\views\poster\components\mixin.js
 */
export const canvasDrawMixin = {
  methods: {
    fillRoundRect(cxt, x, y, width, height, radius, fillColor, borderColor) {
      //圆的直径必然要小于矩形的宽高
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius, borderColor);
      cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
      cxt.restore();
    },
    drawRoundRectPath(cxt, width, height, radius, borderColor) {
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
      //矩形下边线
      cxt.lineTo(radius, height);
      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
      //矩形左边线
      cxt.lineTo(0, radius);
      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
      //上边线
      cxt.lineTo(width - radius, 0);
      //右上角圆弧
      cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
      //右边线
      cxt.lineTo(width, height - radius);

      cxt.strokeStyle = borderColor || '#fff';
      cxt.lineWidth = 1;
      cxt.stroke();
      cxt.closePath();
    },
    // 绘制线条
    drawLine(ctx, x1, y1, x2, y2, color, width) {
      ctx.beginPath();
      ctx.moveTo(x1, y1); //确定起始点
      ctx.lineTo(x2, y2); //确定结束点
      ctx.strokeStyle = color; //线颜色
      ctx.lineWidth = width; //线宽
      ctx.stroke(); // 着色
      ctx.closePath(); // 结束路径
    },
  },
};
